/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, Table, TableRow, TableBody, Cell, useTheme,} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, RepLink, useInputControlSure,
} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {EditStorageContext} from "../../StorageContext";
import {useUppyUploadC} from "../../hook/useUppyUploadC";

export const itemA样图=['_FILE_正侧','_FILE_侧面','_FILE_强试'];
export const PrototypeImg=
    React.forwardRef(({children, show, alone = true, refWidth, label,rep}: InternalItemProps, ref
) => {
        const {modified,setModified,} =React.useContext(EditStorageContext) as any;
        const [getInpFilter] = useMeasureInpFilter(null, itemA样图, );
        const {inp, setInp,onSure} = useInputControlSure({ ref, });
        const onFinish1 = React.useCallback(async(forRow:number, upfile: any, del:boolean) => {
            if(inp){
                onSure({ ...inp, _FILE_正侧: del? undefined : upfile})
                !modified && setModified(true);
            }
        }, [inp, modified,onSure,setModified]);
        const [uploadDom1]=useUppyUploadC({storeObj:inp?._FILE_正侧, repId:rep?.id,
                   row: 0, onFinish:onFinish1, liveDays:1});
        // 第二张
        //只能 每一个都读你写一个回调函数的：
        const onFinish2 = React.useCallback(async(forRow:number, upfile: any, del:boolean) => {
            if(inp){
                onSure({ ...inp, _FILE_侧面: del? undefined : upfile})
                !modified && setModified(true);
            }
        }, [inp, modified,onSure,setModified]);
        const [uploadDom2]=useUppyUploadC({storeObj:inp?._FILE_侧面, repId:rep?.id,
                    row: 1, onFinish:onFinish2, liveDays:1});
        // 第三张
        const onFinish3 = React.useCallback(async(forRow:number, upfile: any, del:boolean) => {
            if(inp){
                onSure({ ...inp, _FILE_强试: del? undefined : upfile})
                !modified && setModified(true);
            }
        }, [inp, modified,onSure,setModified]);
        const [uploadDom3]=useUppyUploadC({storeObj:inp?._FILE_强试, repId:rep?.id,
                 row: 2, onFinish:onFinish3, liveDays:1});
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">{label}：</Text>
                <Text variant="h5">照片1 样机外观（正侧面45°）：</Text>
                {uploadDom1}
                <Text variant="h5">照片2 样机外观（正侧面）：</Text>
                {uploadDom2}
                <Text variant="h5">照片3主要受力结构件强度试验工况：</Text>
                {uploadDom3}
                {children}
            </InspectRecordLayout>
        );
});

interface PrototypeImgVwProps{
    orc: any;
    rep: any;
    children?: React.ReactNode;
    label?: string;
    op?:boolean;
}
/**照片 样机外观
 * */
export const PrototypeImgVw= ({ orc, rep, children,label, op}: PrototypeImgVwProps
) => {
    const theme= useTheme();
    return <>
        <div css={{"@media print": {paddingBottom: '7rem', pageBreakInside: 'avoid'}} }>
            <Text id='PrototypeImg' variant="h4" css={{marginTop: '1rem',textAlign:op? undefined:'center',
            }}>{label}</Text>
            {!op && <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
            }
        </div>
        <Table fixed={["62%", "%"]}
               css={{borderCollapse: 'collapse', "@media print": {marginTop: '-7rem'}}} tight miniw={800}>
            <TableBody>
                {!op && <RepLink rep={rep} tag={'Conclusion'}>
                    <TableRow><Cell colSpan={2} split={true}>
                        <div css={{
                            minHeight: '3rem', whiteSpace: 'pre-wrap'
                        }}>主要结构型式：<br/>{orc.主结构式??''}</div>
                    </Cell></TableRow>
                 </RepLink>
                }
                <RepLink ori rep={rep} tag={'PrototypeImg'}>
                    <TableRow>
                    <Cell colSpan={2} split={true} css={{"@media print": {height: undefined}, padding: 0}}>
                            {!(orc?._FILE_正侧?.url)?
                                <Text css={{textAlign: 'center', display: 'block'}}>空的，进入上传吧</Text>
                                  :
                                <div css={{"@media print": {pageBreakInside: 'avoid'}}}>
                                    <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center',}}>
                                            <img src={process.env.REACT_APP_OSS_ENDP + orc?._FILE_正侧?.url} alt={orc?._FILE_正侧?.url}
                                                 css={{
                                                     maxHeight: '14cm',
                                                     maxWidth: '-webkit-fill-available',
                                                     [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},
                                                     "@media print": {maxHeight: '86vh', maxWidth: '100%'},
                                                 }}
                                            />
                                   </div>
                                </div>
                            }
                            <Text css={{display:'block',textAlign:'center'}}>照片1 样机外观（正侧面45°）</Text>
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <Cell colSpan={2} split={true} css={{"@media print": {height: undefined}, padding: 0}}>
                            {!(orc?._FILE_侧面?.url)?
                                <Text css={{textAlign: 'center', display: 'block'}}>空的，进入上传吧</Text>
                                :
                                <div css={{"@media print": {pageBreakInside: 'avoid'}}}>
                                    <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center',}}>
                                        <img src={process.env.REACT_APP_OSS_ENDP + orc?._FILE_侧面?.url} alt={orc?._FILE_侧面?.url}
                                             css={{
                                                 maxHeight: '14cm',
                                                 maxWidth: '-webkit-fill-available',
                                                 [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},
                                                 "@media print": {maxHeight: '86vh', maxWidth: '100%'},
                                             }}
                                        />
                                    </div>
                                </div>
                            }
                            <Text css={{display:'block',textAlign:'center'}}>照片2 样机外观（正侧面）</Text>
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <Cell colSpan={2} split={true} css={{"@media print": {height: undefined}, padding: 0}}>
                            {!(orc?._FILE_强试?.url)?
                                <Text css={{textAlign: 'center', display: 'block'}}>空的，进入上传吧</Text>
                                :
                                <div css={{"@media print": {pageBreakInside: 'avoid'}}}>
                                    <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center',}}>
                                        <img src={process.env.REACT_APP_OSS_ENDP + orc?._FILE_强试?.url} alt={orc?._FILE_强试?.url}
                                             css={{
                                                 maxHeight: '14cm',
                                                 maxWidth: '-webkit-fill-available',
                                                 [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},
                                                 "@media print": {maxHeight: '86vh', maxWidth: '100%'},
                                             }}
                                        />
                                    </div>
                                </div>
                            }
                            <Text css={{display:'block',textAlign:'center'}}>照片3 主要受力结构件强度试验工况</Text>
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
    </>;
};
